<template>
  <view class="background">
    <view style="width:100%;margin-bottom: 20rpx;">
      <u-tabs  :list="list" :is-scroll="false" v-model="current" @change="change"></u-tabs>
    </view>

    <view  v-for="(item, index) in statusList" :key="index">
    <view class="card">
      <view class="head">
        <view style="margin-top: 20rpx;margin-left: 20rpx;">
          <image :src="avatar" mode="aspectFill"></image>
        </view>
        <view style="margin-top: 20rpx;margin-left: 20rpx;">
          <view style="margin-bottom: 10rpx;">{{name}}</view>
          <view>{{ item.dormId }}</view>
        </view>
        <u-tag style="position: absolute; top: 0rpx;right: 20rpx;" :text="item.repairType" class="tag" />
      </view>

      <view style="margin-left: 20rpx;margin-top: 40rpx;font-size: 14px;">
        {{ item.description }}
        <view style="margin-left: 1%;margin-top: 20rpx;">
          <image class="image" :src="item.image" mode="aspectFill"></image>
        </view>
      </view>
      <view class="bottom-border"/>

      <view class="bottom">
        <view v-if="item.status == 0" style="color: orange;font-size: 18px;width: 30%; height:100%; display: flex;justify-content: center;align-items: center;">受理中</view>
        <view v-else style="color: #2b85e4;font-size: 18px;width: 30%; height:100%; display: flex;justify-content: center;align-items: center;">已完成</view>
        <u-tag text="取消订单" v-if="item.status == 0" @click="cancelRepairOrder(item.id)" style="margin-left: 32%" type="info" mode="light" shape="circle" />
        <u-tag text="详情" @click="intoOrderDetail(item.id)" style="position: absolute; right: 40rpx;"  type="primary" mode="dark" shape="circle" />
      </view>
    </view>
    </view>

  </view>

</template>

<script>
import student from '@/api/student/index.js'
import store from '@/store'
export default {
  data() {
    return {
      avatar: '',
      repairList: [],
      statusList: [],
      name: '',
      list: [{
        name: '受理中',
      }, {
        name: '已完成',
      }, {
        name: '全部'
      }],
      current: 0
    }
  },
  methods: {
    async intoOrderDetail (id) {
      try {
        const res = await student.repairDetail(id)
        uni.navigateTo({
          url: `/pages/repair/orderDetail?id=${id}`, // 跳转的目标页面路径
        });
      } catch (e) {
        console.log(error)
      }
    },
    async cancelRepairOrder(id) {
      try {
        const res = await student.cancelRepair(id)
        if (res.code == 200) {
          uni.showToast({
            title: '取消订单成功',
            icon: 'none', // 可选值：'success', 'loading', 'none'
            duration: 2000, // 显示时长，单位为毫秒
            mask: true // 是否显示透明蒙层
          });
          await this.getList()
        }
        else {
          uni.showToast({
            title: '取消订单失败',
            icon: 'none', // 可选值：'success', 'loading', 'none'
            duration: 2000, // 显示时长，单位为毫秒
            mask: true // 是否显示透明蒙层
          });
        }
      } catch (error) {
        // 处理错误
        console.error('错误:', error)
      }
    },
    async getList () {
      try {
        const res = await student.myRepairDetail()
        this.repairList = res.data
        this.statusList = this.repairList.filter(item => item.status == 0)
        // 处理响应数据
        console.log('报修列表:', res)
      } catch (error) {
        // 处理错误
        console.error('错误:', error)
      }
    },
    change(index) {
      if (index.index == 0) {
        this.statusList = this.repairList.filter(item => item.status == 0)
      }
      if (index.index == 1) {
        this.statusList = this.repairList.filter(item => item.status == 1)
      }
      if (index.index == 2) {
        this.statusList = this.repairList
      }
      console.log("index", index);
    }
  },
  async onLoad() {
    this.avatar = store.getters.getUserInfo.image
    await this.getList ()
  }
}
</script>

<style>
.background {
  display: flex;
  width: 100%;
  height: 100vh;
  background-color: #f3f4f6;
  flex-direction: column;
}
.card {
  margin-left: 2%;
  height: 550rpx;
  width: 96%;
  background-color: #fff;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  position: relative; /* 设置相对定位 */
}
image {
  border-radius: 50%;
  width:80rpx;
  height:80rpx;
}
.head {
  //margin-top: 20rpx;
  display: flex;
  flex-direction: row;
  font-size: 14px;
}
.tag {

}
.image {
  width: 126rpx;
  height: 126rpx;
  margin-right: 10rpx;
  border-radius: 0;
  border-radius: 10rpx;
}
.bottom-border {
  margin-top: 70rpx;
  width: 100%;
  height: 1px; /* 边框线的高度 */
  background-color: rgba(221, 221, 221, 0.45); /* 边框线的颜色 */
  margin-left: 2%;
  margin-right: 2%;
}
.bottom {
  position: relative; /* 设置相对定位 */
  width: 100%;
  height: 160rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
}
</style>